<template>
  <view class="page-container">
    <backView :back="goBack" />

    <view class="page-header">
      <text class="page-title">主诉</text>
    </view>

    <view class="page-body">
      <ChiefComplaintSection
        :is-expanded="isExpanded"
        @toggle="toggle"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import backView from '@/components/backView.vue'
import ChiefComplaintSection from '@/components/medical-record/ChiefComplaintSection.vue'

const isExpanded = ref(true)
const toggle = () => {
  isExpanded.value = !isExpanded.value
}

const goBack = () => {
  Taro.navigateBack()
}
</script>

<style scoped lang="scss">
.page-container {
  min-height: 100vh;
  width: 100%;
  max-width: 750rpx;
  margin: 0 auto;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.page-header {
  background-color: #27c530;
  color: #fff;
  padding: 30rpx;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
}

.page-title {
  font-size: 32rpx;
  font-weight: 700;
  text-align: center;
  display: block;
}

.page-body {
  padding: 24rpx;
  padding-bottom: 120rpx;
}
</style>

